<template>
  <div class="p-6">
    <h1 class="text-3xl font-bold mb-6 text-gray-800">健康提醒</h1>
    
    <!-- 添加提醒表单 -->
    <div class="bg-white rounded-lg shadow-md p-6 mb-6">
      <h2 class="text-xl font-semibold mb-4 text-gray-800">添加新提醒</h2>
      
      <el-form :model="reminderForm" label-width="120px" class="max-w-2xl">
        <el-form-item label="提醒类型">
          <el-select v-model="reminderForm.type" placeholder="选择提醒类型">
            <el-option label="用药提醒" value="medication" />
            <el-option label="运动提醒" value="exercise" />
            <el-option label="健康检测" value="health_check" />
            <el-option label="复诊提醒" value="appointment" />
          </el-select>
        </el-form-item>
        
        <el-form-item label="提醒内容">
          <el-input v-model="reminderForm.content" type="textarea" placeholder="请输入提醒内容" />
        </el-form-item>
        
        <el-form-item label="提醒时间">
          <el-time-picker v-model="reminderForm.time" placeholder="选择时间" />
        </el-form-item>
        
        <el-form-item label="重复频率">
          <el-select v-model="reminderForm.frequency" placeholder="选择重复频率">
            <el-option label="每天" value="daily" />
            <el-option label="每周" value="weekly" />
            <el-option label="每月" value="monthly" />
            <el-option label="一次性" value="once" />
          </el-select>
        </el-form-item>
        
        <el-form-item>
          <el-button type="primary" @click="addReminder">添加提醒</el-button>
          <el-button @click="resetReminderForm">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    
    <!-- 提醒列表 -->
    <div class="bg-white rounded-lg shadow-md p-6">
      <h2 class="text-xl font-semibold mb-4 text-gray-800">我的提醒</h2>
      
      <div class="space-y-4">
        <div v-for="reminder in reminders" :key="reminder.id" 
             class="border rounded-lg p-4 flex items-center justify-between"
             :class="reminder.completed ? 'bg-green-50 border-green-200' : 'bg-gray-50 border-gray-200'">
          
          <div class="flex items-center space-x-4">
            <el-checkbox v-model="reminder.completed" @change="toggleReminder(reminder)" />
            <div>
              <h3 class="font-medium text-gray-800">{{ reminder.content }}</h3>
              <p class="text-sm text-gray-600">{{ reminder.type }} • {{ reminder.time }} • {{ reminder.frequency }}</p>
            </div>
          </div>
          
          <div class="flex items-center space-x-2">
            <el-button type="text" size="small" @click="editReminder(reminder)">编辑</el-button>
            <el-button type="text" size="small" @click="deleteReminder(reminder)" class="text-red-600">删除</el-button>
          </div>
        </div>
      </div>
      
      <div v-if="reminders.length === 0" class="text-center py-8 text-gray-500">
        <el-icon class="text-4xl mb-2"><Bell /></el-icon>
        <p>暂无提醒事项</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'

const reminderForm = ref({
  type: '',
  content: '',
  time: '',
  frequency: ''
})

const reminders = ref([
  {
    id: 1,
    type: '用药提醒',
    content: '服用降压药 - 氨氯地平 5mg',
    time: '08:00',
    frequency: '每天',
    completed: false
  },
  {
    id: 2,
    type: '运动提醒',
    content: '快走30分钟',
    time: '18:00',
    frequency: '每天',
    completed: true
  },
  {
    id: 3,
    type: '健康检测',
    content: '测量血压和心率',
    time: '09:00',
    frequency: '每周',
    completed: false
  }
])

const addReminder = () => {
  if (!reminderForm.value.content || !reminderForm.value.time) {
    ElMessage.warning('请填写完整的提醒信息')
    return
  }
  
  const newReminder = {
    id: Date.now(),
    type: reminderForm.value.type,
    content: reminderForm.value.content,
    time: reminderForm.value.time,
    frequency: reminderForm.value.frequency,
    completed: false
  }
  
  reminders.value.push(newReminder)
  ElMessage.success('提醒添加成功！')
  resetReminderForm()
}

const resetReminderForm = () => {
  reminderForm.value = {
    type: '',
    content: '',
    time: '',
    frequency: ''
  }
}

const toggleReminder = (reminder) => {
  reminder.completed = !reminder.completed
  ElMessage.success(reminder.completed ? '提醒已完成' : '提醒已标记为未完成')
}

const editReminder = (reminder) => {
  console.log('编辑提醒:', reminder)
  // 这里可以添加编辑逻辑
}

const deleteReminder = (reminder) => {
  const index = reminders.value.findIndex(item => item.id === reminder.id)
  if (index > -1) {
    reminders.value.splice(index, 1)
    ElMessage.success('提醒已删除')
  }
}
</script>